<!DOCTYPE html>
<html>
<head>
	<title>test for vue</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div id="cnt">
	<div v-if="ok"
    v-finger:tap="tap"
    v-finger:multipoint-start="multipointStart"
    v-finger:long-tap="longTap"
    v-finger:swipe="swipe"
    v-finger:pinch="pinch"
    v-finger:rotate="rotate"
    v-finger:press-move="pressMove.bind(this, 12)"
    v-finger:multipoint-end="multipointEnd"
    v-finger:double-tap="doubleTap"
    v-finger:single-tap="singleTap"

    v-finger:touch-start="touchStart"
    v-finger:touch-move="touchMove"
    v-finger:touch-end="touchEnd"
    v-finger:touch-cancel="touchCancel"
  >
		<div>the element that you want to bind event</div>
	</div>
</div>
<script type="text/javascript" src="./vue.min.js"></script>
<script type="text/javascript" src="../../../alloy_finger.js"></script>
<script type="text/javascript" src="../../alloy_finger.vue.js"></script>
<script type="text/javascript">
	Vue.use(AlloyFingerVue);
  var data = {
    ok: true
  };

	var h = new Vue({
		el: '#cnt',
    data: data,
		methods: {
			tap: function() { console.log('onTap'); },
      multipointStart: function() { console.log('onMultipointStart'); },
      longTap: function() { console.log('onLongTap'); },
      swipe: function(evt) {
        console.log("swipe" + evt.direction);
        console.log('onSwipe');
      },
      pinch: function(evt) { 
        console.log(evt.scale);
        console.log('onPinch'); 
      },
      rotate: function(evt) {
        console.log(evt.angle);
        console.log('onRotate'); 
      },
      pressMove: function(num, evt) {
        console.log(evt.deltaX);
        console.log(evt.deltaY);
        console.log('onPressMove with params:' + num); 
      },
      multipointEnd: function() { console.log('onMultipointEnd'); },
      doubleTap: function() { console.log('onDoubleTap'); },
      singleTap: function () { console.log('onSingleTap'); },

      touchStart: function() { console.log('onTouchStart'); },
      touchMove: function() { console.log('onTouchMove'); },
      touchEnd: function() { console.log('onTouchEnd'); },
      touchCancel: function() { console.log('onTouchCancel'); }
		}
	});
</script>
</body>
</html>